<template>
  <view class="publish-job-container">
    <!-- 固定顶部区域 -->
    <view class="fixed-header">
      <view class="header">
        <view class="back-button" @click="goBack">
          <image class="back-icon" src="/static/back.png"></image>
        </view>
        <text class="page-title">发布招聘</text>
      </view>
    </view>

    <!-- 可滚动内容区域 -->
    <scroll-view class="scrollable-content" scroll-y>
      <view class="form-card">
        <!-- 职位基本信息 -->
        <view class="section-title">基本信息</view>
        <view class="form-item">
          <text class="label">职位类型</text>
          <picker @change="onJobTypeChange" :value="jobTypeIndex" :range="jobTypes" range-key="name">
            <view class="picker-input">{{ jobTypes[jobTypeIndex] ? jobTypes[jobTypeIndex].name : '请选择职位类型' }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">职位名称</text>
          <input class="input-field" v-model="formData.title" placeholder="请输入职位名称" />
        </view>
        <view class="form-item">
          <text class="label">职位标签</text>
          <input class="input-field" v-model="formData.tags" placeholder="多个标签用逗号隔开，例如：后端,Java" />
        </view>

        <!-- 职位描述与要求 -->
        <view class="section-title">职位详情</view>
        <view class="form-item-textarea">
          <text class="label">岗位职责</text>
          <textarea class="textarea-field" v-model="formData.responsibilities" placeholder="请描述岗位主要职责"></textarea>
        </view>
        <view class="form-item-textarea">
          <text class="label">岗位要求</text>
          <textarea class="textarea-field" v-model="formData.requirements" placeholder="请描述对候选人的要求"></textarea>
        </view>

        <!-- 其他要求 -->
        <view class="section-title">其他要求</view>
        <view class="inline-form-group">
          <view class="form-item">
            <text class="label">学历要求</text>
            <picker @change="onEducationChange" :value="educationIndex" :range="educationOptions">
              <view class="picker-input">{{ educationOptions[educationIndex] || '请选择' }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">毕业时间</text>
            <picker mode="date" fields="year" @change="onGraduationYearChange" :value="formData.graduationYear">
              <view class="picker-input">{{ formData.graduationYear || '请选择' }}</view>
            </picker>
          </view>
          <view class="form-item">
            <text class="label">薪资范围</text>
            <input class="input-field" v-model="formData.salary" placeholder="例如：10k-20k" />
          </view>
        </view>
        <view class="form-item">
          <text class="label">工作城市</text>
          <input class="input-field" v-model="formData.city" placeholder="请输入工作城市" />
        </view>
        <view class="form-item">
          <text class="label">工作地址</text>
          <input class="input-field" v-model="formData.address" placeholder="请输入详细工作地址" />
        </view>
      </view>
    </scroll-view>

    <!-- 悬浮按钮 -->
    <view class="floating-button">
      <button class="submit-btn" :disabled="submitting" @click="submitJob">
        <text class="btn-text">{{ submitting ? '发布中...' : '立即发布' }}</text>
        <text v-if="!submitting" class="btn-icon">→</text>
      </button>
    </view>
  </view>
</template>

<script>
import { createRecruitJob } from '../../api/recruit.js'

export default {
  data() {
    return {
      formData: {
        title: '', // 职位名称
        jobType: '', // 职位类型
        responsibilities: '', // 岗位职责
        requirements: '', // 岗位要求
        education: '', // 学历要求
        graduationYear: '', // 毕业时间
        salary: '', // 薪资范围
        tags: '', // 职位标签
        city: '', // 工作城市
        address: '', // 工作地址
      },
      jobTypes: [
        { id: 'it', name: 'IT/互联网' },
        { id: 'finance', name: '金融' },
        { id: 'manufacture', name: '制造业' },
        { id: 'education', name: '教育' },
        { id: 'other', name: '其他' },
      ],
      jobTypeIndex: -1,
      educationOptions: ['不限', '大专', '本科', '硕士', '博士'],
      educationIndex: -1,
      submitting: false,
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    onJobTypeChange(e) {
      this.jobTypeIndex = e.detail.value;
      this.formData.jobType = this.jobTypes[this.jobTypeIndex].name;
    },
    onEducationChange(e) {
      this.educationIndex = e.detail.value;
      this.formData.education = this.educationOptions[this.educationIndex];
    },
    onGraduationYearChange(e) {
      this.formData.graduationYear = e.detail.value;
    },
    async submitJob() {
      if (this.submitting) return;

      // 简单的数据验证
      if (!this.formData.title || !this.formData.jobType || !this.formData.salary || !this.formData.city) {
        uni.showToast({
          title: '请填写完整基本信息',
          icon: 'none'
        });
        return;
      }

      this.submitting = true;
      try {
        // 调用发布招聘接口
        const res = await createRecruitJob(this.formData);
        if (res && res.success) {
          uni.showToast({
            title: '发布成功',
            icon: 'success'
          });
          // 发布成功后可以返回上一页或者重置表单
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: res.message || '发布失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '网络或服务器错误',
          icon: 'none'
        });
      } finally {
        this.submitting = false;
      }
    },
  },
};
</script>

<style scoped>
.publish-job-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
  overflow: hidden;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
}

.scrollable-content {
  flex: 1;
  margin-top: 160rpx;
  margin-bottom: 120rpx;
  padding: 24rpx;
  background: transparent;
  z-index: 10;
}

.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.back-button {
  position: absolute;
  top: 98rpx; /* 与header新的padding-top对齐 */
  left: 36rpx; /* 与header的padding-left对齐 */
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1rpx solid rgba(16, 185, 129, 0.2);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
}

.form-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  padding: 40rpx; /* 增加卡片内边距 */
  margin-bottom: 32rpx;
  border: 1rpx solid #eef2f7; /* 增加轻微边框 */
}

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 32rpx; /* 增加与表单项的间距 */
  padding-bottom: 18rpx; /* 增加下边距 */
  border-bottom: 1rpx solid #e6e6e6; /* 更柔和的分隔线割线 */
}

.form-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 32rpx; /* 增加表单项间距 */
  flex: 1; /* 均分隔线空间 */
}

.inline-form-group {
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: space-between; /* 均匀分隔线布 */
  gap: 24rpx; /* 项目间距 */
  margin-bottom: 32rpx; /* 增加与下方表单项的间距 */
}

.form-item-textarea {
  display: flex;
  flex-direction: column;
  margin-bottom: 32rpx; /* 增加文本域表单项间距 */
}

.label {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 16rpx; /* 增加标签与输入框的间距 */
  font-weight: 500;
}

.input-field, .picker-input, .textarea-field {
  width: 100%;
  padding: 28rpx; /* 增加输入框内边距 */
  border: 1rpx solid #e0e0e0;
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  background-color: #fcfcfc; /* 更浅的背景色 */
}

.picker-input {
  display: flex;
  align-items: center;
  min-height: 80rpx;
  height: 80rpx; /* 统一高度 */
  box-sizing: border-box; /* 确保内边距不影响宽度 */
}

.textarea-field {
  min-height: 200rpx; /* 增加文本域高度 */
  line-height: 1.5;
}

.floating-button {
  position: fixed;
  bottom: 40rpx;
  left: 32rpx;
  right: 32rpx;
  z-index: 200;
  pointer-events: none;
  padding: 8rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 36rpx;
  backdrop-filter: blur(20rpx);
  box-shadow: 
    0 8rpx 32rpx rgba(0, 0, 0, 0.1),
    0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.floating-button .submit-btn {
  pointer-events: auto;
}

.submit-btn {
  width: 100%;
  height: 108rpx;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  color: white;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 16rpx 48rpx rgba(16, 185, 129, 0.35),
    0 8rpx 24rpx rgba(16, 185, 129, 0.25),
    0 4rpx 12rpx rgba(16, 185, 129, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 1rpx;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.submit-btn:hover::before {
  left: 100%;
}

.submit-btn:active {
  transform: translateY(3rpx) scale(0.98);
  box-shadow: 
    0 12rpx 36rpx rgba(16, 185, 129, 0.4),
    0 6rpx 18rpx rgba(16, 185, 129, 0.3),
    0 2rpx 8rpx rgba(16, 185, 129, 0.2);
}

.submit-btn:disabled {
  opacity: 0.7;
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%);
  box-shadow: 
    0 8rpx 24rpx rgba(156, 163, 175, 0.3),
    0 4rpx 12rpx rgba(156, 163, 175, 0.2);
  transform: none;
}

.submit-btn:disabled::before {
  display: none;
}

.btn-text {
  font-size: 32rpx;
  font-weight: 600;
  letter-spacing: 1rpx;
}

.btn-icon {
  font-size: 28rpx;
  font-weight: 700;
  margin-left: 12rpx;
  transition: transform 0.3s ease;
}

.submit-btn:hover .btn-icon {
  transform: translateX(4rpx);
}
</style>
